$(function () {
    initailMenu($('.indexleft'));
});

/**初始化菜单
 * */
function initailMenu(component) {
    $.ajax({
        url: 'getMenuList',
        type: 'post',
        success: function (menuList) {
            writeMenu(component, menuList);
        }
    });
}

/**拼接菜单
 * */
function writeMenu(component, menuList) {
    component.text("");
    for (var i in menuList) {
        var flag = menuList[i].submenu && menuList[i].submenu.length > 0;//是否有子菜单

        var menu = '<a href="#" class="list-group-item list-group-item-action"><i class="' + menuList[i].icon + '"></i><span>' + menuList[i].menuName + '</span></a>';
        var submenu = '';
        if (flag) {
            var submenu = '<span class="list-group">';
            for (var j in menuList[i].submenu) {
                submenu += '<a href="javascript:clickMenu(\'' + menuList[i].submenu[j].url + '\',\'' + menuList[i].submenu[j].menuName + '\')" class="list-group-item list-group-item-action"><i class="' + menuList[i].submenu[j].icon + '"></i><span>' + menuList[i].submenu[j].menuName + '</span></a>';
            }
            submenu += '</span>';
        }
        component.append(menu + submenu);
    }

    //菜单点击效果
    $('.list-group-item').click(function () {
        $('.indexleft').find('.active').removeClass('active');
        $(this).addClass('active').next('.list-group').toggle(200);
    });

}

var menuArray = new Array();


/**左侧菜单点击事件，添加tab页签、页面、tab关闭事件
 * **/
function clickMenu(url, menuName) {
    var hasFlag = false;
    $.each(menuArray, function () {
        var tab = $('#tab_' + this.menuName);
        var tabpanel = $('#tabpanel_' + this.menuName);
        var flag = tab.hasClass('active');

        if (this.menuName == menuName) {
            if (!flag) {
                tab.addClass('active');
                tabpanel.addClass('active');
            }
            hasFlag = true;
        } else {
            tab.removeClass('active');
            tabpanel.removeClass('active');
        }
    });

    if (!hasFlag) {
        var tab = '<li role="presentation" id="tab_' + menuName + '" class="active"><i></i><a href="#tabpanel_' + menuName + '" aria-controls="tabpanel_' + menuName + '" role="tab" data-toggle="tab">' + menuName + '</a></li>'
        var tabpanel = '<div role="tabpanel" class="tab-pane active" id="tabpanel_' + menuName + '"><iframe style="width:100%;height:100%;border: none;" src="' + url + '"></iframe></div>';
        $('.nav-tabs').append(tab);
        $('.tab-content').append(tabpanel);
        $.each(menuArray, function () {
            $('#tabpanel_' + this.menuName).removeClass('active');
            $('#tab_' + this.menuName).removeClass('active');
        });
        menuArray.push({menuName: menuName, url: url});

        //添加tab关闭事件
        $(".nav-tabs li i").click(function () {
            var menuName = $(this).parent()[0].id.split("_")[1];
            $('#tab_' + menuName).remove();
            $('#tabpanel_' + menuName).remove();
            $.each(menuArray, function (index) {
                //动态打开附近tab
                if (menuArray.length > 1) {
                    var mn = menuArray[index == 0 ? 1 : index - 1].menuName;
                    $('#tabpanel_' + mn).addClass('active');
                    $('#tab_' + mn).addClass('active');
                }

                if (this.menuName == menuName) {
                    menuArray.splice(index, 1);
                }
            });
        });
    }
}

